<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <el-input v-model="listQuery.title" placeholder="请输入标题搜索关键字" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-show="checkPermission('knowledgeAdd')" v-waves class="filter-item" type="primary" icon="el-icon-plus" style="float:right" @click="handleAdd">
        添加知识库
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :element-loading-text="g.loadingStr"
      :header-cell-style="{background:g.mainColor}"
    >
      <el-table-column label="序号" align="center" width="100" fixed>
        <template slot-scope="{$index}">
          <span>{{ $index + 1 + ( listQuery.currentPage - 1 ) * listQuery.pageSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center" width="180">
        <template slot-scope="{row}">
          <span><img :src="row.topicPic" alt="" class="table-row-img"></span>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center" width="200">
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="话题内容" align="center">
        <template slot-scope="{row}">
          <span class="focusContent" v-html="row.content" />
        </template>
      </el-table-column>
      <el-table-column label="浏览数" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.viewCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评论数" align="center" width="90px">
        <template slot-scope="{row}">
          <span>{{ row.commentCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分类" align="center" width="200">
        <template slot-scope="{row}">
          <span>{{ row.categoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="180">
        <template slot-scope="{row}">
          <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前状态" align="center" width="90px">
        <template slot-scope="{row,$index}">
          <span>
            <el-switch
              v-model="row.status"
              @change="changeStatus(row,$index)"
            />
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="180px">
        <template slot-scope="{row,$index}">
          <el-button type="success" size="mini" @click="handleAddComment(row)">
            评论
          </el-button>
          <p />
          <el-button v-show="checkPermission('knowledgeEdit')" type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <p />
          <el-button type="danger" size="mini" @click="handleDel(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <el-dialog
      title="水军评论"
      :visible.sync="dialogVisible"
      width="1000px"
    >

      <el-table
        :key="userTableKey"
        ref="singleTable"
        v-loading="userListLoading"
        :data="userList"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :element-loading-text="g.loadingStr"
        :header-cell-style="{background:g.mainColor}"
        @current-change="handleCurrentChange"
      >
        <el-table-column label="序号" align="center" width="100" fixed>
          <template slot-scope="{$index}">
            <span>{{ $index + 1 + ( listQuery.currentPage - 1 ) * listQuery.pageSize }}</span>
          </template>
        </el-table-column>
        <el-table-column label="昵称" align="center" width="200">
          <template slot-scope="{row}">
            <span>{{ row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话号码" align="center">
          <template slot-scope="{row}">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="userTotal>0" :total="userTotal" :page.sync="userListQuery.currentPage" :limit.sync="userListQuery.pageSize" @pagination="userGetList" />

      <label style="display:block;height:30px;line-height:30px;font-size:16px;">已选中用户</label>
      <label v-if="currentRow !== null" style="display:block;height:30px;line-height:30px;font-size:15px;font-weight:400;">{{ currentRow['nickName'] }}</label>

      <el-input
        v-model="commentContent"
        style="width:100%;margin-top: 20px;"
        type="textarea"
        show-word-limit
        placeholder="请输入评论内容"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commentSubmit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { knowledgeList, knowledgeDel, knowledgeUpdateStatus, userList, knowledgeCommentAdd } from '@/api/content'

export default {
  name: 'KnowledgeList',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        title: ''
      },

      dialogVisible: false,
      userTableKey: 0,
      userList: null,
      userTotal: 0,
      userListLoading: true,
      userListQuery: {
        currentPage: 1,
        pageSize: 10,
        title: ''
      },
      currentListRow: null,
      currentRow: null,
      commentContent: ''
    }
  },
  created() {
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      knowledgeList(this.listQuery).then(response => {
        console.log(response.data)
        this.list = response.data.records
        for (const index in this.list) {
          this.list[index]['status'] = this.list[index]['status'] === 1
        }
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleAddComment(row) {
      console.log(row)

      this.currentListRow = row
      this.dialogVisible = true
      this.commentContent = ''
      this.userGetList()
    },
    userGetList() {
      this.userListLoading = true
      userList(this.userListQuery).then(response => {
        console.log(response.data)
        this.userList = response.data.records
        this.userTotal = response.data.total
        this.userListLoading = false
      })
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange(val) {
      this.currentRow = val
      console.log(val)
    },
    commentSubmit() {
      if (this.currentRow === null) {
        this.$message({ message: '请输入请选择水军', type: 'error' })
        return
      }
      if (this.commentContent === '') {
        this.$message({ message: '请输入评论', type: 'error' })
        return
      }
      knowledgeCommentAdd({
        createBy: this.currentRow['id'],
        createAuthor: this.currentRow['nickName'],
        img: this.currentRow['avatar'],
        knowledgeId: this.currentListRow['id'],
        commentId: '',
        commentContent: this.commentContent,
        status: 1,
        commentLevel: 1
      }).then(response => {
        this.$message({ message: '操作成功', type: 'success' })
        this.dialogVisible = false
        this.commentContent = ''
        this.currentRow = null
        this.currentListRow = null
      })
    },
    handleUpdate(row) {
      console.log(row)
      this.$router.push({ name: 'KnowledgeEdit', params: { id: row.id }})
    },
    handleDel(row, index) {
      console.log(row)

      this.$confirm('是否确认删除该知识库？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        knowledgeDel({
          id: row['id']
        }).then(response => {
          this.$message({ message: '操作成功', type: 'success' })
          this.list.splice(index, 1)
        })
      })
    },
    handleAdd() {
      this.$router.push('KnowledgeAdd')
    },
    changeStatus(row, index) {
      console.log(row)
      console.log(index)
      knowledgeUpdateStatus({
        id: row['id'],
        status: row['status'] ? 1 : 0
      }).then(response => {
        this.$message({ message: '操作成功', type: 'success' })
      }).catch(() => {
        this.list[index]['status'] = !this.list[index]['status']
      })
    }
  }
}
</script>

<style scoped lang="scss">
.focusContent{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
  padding: 0 10px;
}
.table-row-img{
  width: 100px;
  height: 80px;
  object-fit: contain;
}
</style>
